<template>
  <div>
    <com-head title="购物车" />
    <div class="wrap">
<div class="items">
        <div class="item" v-for="item in items" :key="item.id">
          <van-swipe-cell>
            <div class="_item">
              <!-- 复选框 -->
              <van-checkbox
              @click="selectCart(item.key,item.selected)"
              v-model="item.selected"/>
              <van-card
                :num="item.number"
                :price="item.price"
                :title="item.name"
                :thumb="item.pic"
              >
                <template #footer>
                  <van-stepper v-model="item.number" @change="onChange(item.key,item.number)"/>
                </template>
              </van-card>
            </div>
             <template #right>
                <van-button
                @click="deleteItem(item.key)"
                  square text="删除" type="danger" class="delete-button" />
              </template>
          </van-swipe-cell>
        </div>
      </div>
      <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit">
   <van-checkbox v-model="allChecked" >全选</van-checkbox>
    </van-submit-bar>
    </div>
    <tabbar />
  </div>

</template>

<script>
import tabbar from '@components/Tabbar'
import ComHead from '@components/ComHead'
import { mapState, mapActions, mapMutations } from 'vuex'
import { changeCartNumber, removeCart, selectCart } from '@api'
import { Dialog } from 'vant'
export default {
  data () {
    return {
      token: localStorage.getItem('token')
    }
  },
  created () {
    this.get_cart()
  },
  methods: {
    // 改变商品选中状态
    selectCart (key, selected) {
      selectCart({
        key,
        selected,
        token: this.token
      }).then(res => {
        if (res.data.code === 0) {
          console.log(res)
          this.init_cart_info({
            items: res.data.data.items,
            total: res.data.data.price
          })
        }
      })
    },
    // 删除商品
    deleteItem (key) {
      Dialog.confirm({
        title: '删除商品',
        message: '是否确认删除'
      })
        .then(() => {
          removeCart({
            key,
            token: this.token
          }).then(res => {
            if (res.data.code === 700) {
              // 请求成功 修改数据 数据在vuex中管理
              this.init_cart_info({
                items: [],
                total: 0
              })
            }
            if (res.data.code === 0) {
              // 请求成功 修改数据 数据在vuex中管理
              this.init_cart_info({
                items: res.data.data.items,
                total: res.data.data.price
              })
            }
          })
        })
    },
    // 修改商品数量
    onChange (key, number) {
      // 调用请求接口
      changeCartNumber({
        key,
        number,
        token: this.token
      }).then(res => {
        if (res.data.code === 0) {
          console.log(res)
          // 请求成功 修改数据 数据在vuex中管理
          this.init_cart_info({
            items: res.data.data.items,
            total: res.data.data.price
          })
        }
      })
    },
    onSubmit () {
      this.$router.push('/commitorder')
    },
    ...mapActions('cart', ['get_cart']),
    ...mapMutations('cart', ['init_cart_info'])

  },
  computed: {
    ...mapState({
      items: state => state.cart.items,
      total: state => state.cart.total
    }),
    // 定义自定义属性 获取所有 商品选中属性的数组
    // 将[{key:zzz},{key:xxxx}] ==> [key,key]
    itemskey () {
      const keys = []
      this.items.forEach((item) => {
        keys.push(item.key)
      })
      return keys
    },
    allChecked: {
      get () {
        return this.items.every(item => item.selected)
      },
      set (val) {
        // 全选状态 修改计算属性 在set里修改它的依赖
        // 即重新请求 修改mutation
        // console.log(val) val:false/true 最新设置的值
        selectCart({
          key: this.itemskey.join(), // 多个值 计算属性
          selected: val,
          token: this.token
        }).then(res => {
          if (res.data.code === 0) {
            console.log(res)
            this.init_cart_info({
              items: res.data.data.items,
              total: res.data.data.price
            })
          }
        })
      }
    }
  },
  components: {
    tabbar,
    ComHead
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding-top: 46px;
  padding-bottom: 100px;
   .delete-button {
    height: 100%;
  }
  ._item{
    display: flex;
    background-color: #fafafa;
    .van-checkbox{
      padding: 0 5px;
    }
    .van-card{
      flex: 1;
    }
  }
}
.van-submit-bar{
  bottom: 50px;
}
</style>
